$.ajaxSetup({
  contentType: "application/json"
});
// API 接口地址      
// 页面初始化函数，在其中发送 AJAX 请求
$(function () {
    // $.getJSON 函数接收两个参数：
    // 第一个参数是 API 地址，
    // 第二个参数是得到响应后的回调函数
    $.getJSON('/cat', renderCatTable);
    // 为btnSearch按钮添加点击事件处理函数
    $('#btnSearch').on('click', function () {
      var catId = $('#iptSearch').val();
      if (catId) {
          // 将获取到的catId值转换为整数类型
          catId = parseInt(catId);
          //测试
          // alert(catId);
          $.getJSON('/cat/selectByCatId?cat_id='+catId, function (data) {
              // 清空原有表格数据
              $('#Cat-tbody').empty();
              // 渲染查询到的数据到表格
              renderCatTable(data);
          });
      } else {
          alert('请输入要查询的猫猫编号！');
      }
    });
});

// 猫的信息数组来自传入的参数 data
function renderCatTable(data) {
    
    $(function () {
       data = data.data;
       data.forEach(function(cat,i) {
          // 获取当前访问的猫
          var cat = data[i];
          var tdId = $("<td>").append(cat.cat_id);
          var tdBreed = $("<td>").append(cat.breed);
          var tdAge = $("<td>").text(cat.age);
          var tdLostData = $("<td>").text(cat.lost_data);
          var tdLostSite = $("<td>").text(cat.lost_site).css({
            'width': '100px'
          });
          var img=$('<img>').attr('src',`images/${cat.cat_id}`).css({
            'width': '100px', // 设置固定宽度，可根据需求调整具体数值
            'height': '100px' // 设置固定高度，可根据需求调整具体数值
          });
          var tdPicture = $("<td>").append(img);
          var tdNumber = $("<td>").text(cat.number)
          var tdDescription = $("<td>").text(cat.description).css({
            'width': '280px', // 设置特征描述列的宽度为200px，可根据需求调整具体数值
            'overflow': 'hidden', // 当内容超出宽度时隐藏多余部分
            'text-overflow': 'ellipsis', // 超出部分显示省略号
            'text-indent': '2em'
          });
          var tdOperate=$('<td>')

          var btnUpdate=$('<button>').attr('ida',cat.id);
          //为更新添加锚点
          var aUpdate=$('<a>').attr('href','#form').text('修改');
          $(btnUpdate).append(aUpdate);
          //将编号存在删除按钮中
          var btnDelete=$('<button>').attr('ida',cat.id);
          var aDelete=$('<a>').text('删除');
          $(btnDelete).append(aDelete);
          $(btnDelete).on('click',function(){
            var id=$(this).attr('ida');
            //alert(catId);
            deleteCat(id);
          })


          $(btnUpdate).on('click',function(){
            var id=$(this).attr('ida');
            // alert(id);
            //点击修改按钮把修改button的ida赋给保存按钮的button
            $('#btnSave').attr('operation','修改').attr('ida',id).text('修改');
            
            $('form span').text('修改猫猫信息');
            $('#iptCatId').val(cat.cat_id);
            $('#iptCatBreed').val(cat.breed);
            $('#iptAge').val(cat.age);
            $('#iptDate').val(cat.lost_data);
            $('#iptSite').val(cat.lost_site);
            $('#iptNumber').val(cat.number);
            $('#iptDescription').val(cat.description);
          })
          // 美化修改和删除按钮的CSS风格，设置与给定示例相同的样式
          $(btnUpdate).css({
            'padding': '10px 20px',
            'margin-right': '5px',
            'border': 'none',
            'border-radius': '5px',
            'background-color': '#80A482',
            'color': 'white',
            'cursor': 'pointer',
            'transition': 'background-color 0.3s ease',
            'position': 'relative',
            'right': '0px',
            'width':'70px',
            'height':'37px'
        });
        $(btnDelete).css({
            'padding': '10px 20px',
            'margin-right': '5px',
            'border': 'none',
            'border-radius': '5px',
            'background-color': '#80A482',
            'color': 'white',
            'cursor': 'pointer',
            'transition': 'background-color 0.3s ease',
            'position': 'relative',
            'right': '0px',
            'width':'70px',
            'height':'37px'
        });
        // 添加修改按钮的鼠标悬停和移出效果
        $(btnUpdate).hover(function () {
          $(this).css('background-color', '#558B2F');
        }, function () {
          $(this).css('background-color', '#80A482');
        });
        // 添加删除按钮的鼠标悬停和移出效果
        $(btnDelete).hover(function () {
          $(this).css('background-color', '#558B2F');
        }, function () {
          $(this).css('background-color', '#80A482');
        });


          $(tdOperate).append(btnUpdate).append(btnDelete);
          // 下面三行，先创建 tr 元素，
          // 再向其中追加上面创建的七个 td 元素，
          // 最后将这个 tr 元素追加到 #book-tbody
          var tr = $("<tr>")
            .append(tdId,tdBreed,tdAge, tdLostData, tdLostSite, tdPicture, tdNumber, tdDescription,tdOperate)
            .appendTo($("#Cat-tbody"));
          
          if((i%2)==0){
            $(tr).css("background-color","#D7EFCD")
          }else{
            $(tr).css("background-color","wihte")
          }
        
        })//foreach结束
        $("#table td").css("border","1px solid #e0e0e0").css("color","#666");
        $("#table").css("border-collapse","collapse");


        //添加onclick效果
        $('#btnAdd').on('click',function(){
          $('#btnSave').attr('operation','添加').text('添加');
          $('form span').text('走丢的猫猫信息');
          $('#iptCatId').val('');
          $('#iptCatBreed').val('');
          $('#iptAge').val('');
          $('#iptDate').val('');
          $('#iptSite').val('');
          $('#iptNumber').val('');
          $('#iptDescription').val('');
        })
        $('#btnCancel').on('click',function(){
          $('#btnSave').attr('operation','添加').text('添加');
          $('form span').text('走丢的猫猫信息');
          $('#iptCatId').val('');
          $('#iptCatBreed').val('');
          $('#iptAge').val('');
          $('#iptDate').val('');
          $('#iptSite').val('');
          $('#iptNumber').val('');
          $('#iptDescription').val('');
        })

        //保存按钮onclick
        $('#btnSave').on('click', function() {
          var id=$('#btnSave').attr('ida');
          //测试
          // alert(id)
          var newCat = {};
          newCat.cat_id = $('#iptCatId').val();
          newCat.breed = $('#iptCatBreed').val();
          newCat.age = $('#iptAge').val();
          newCat.lost_data = $('#iptDate').val();
          newCat.lost_site = $('#iptSite').val();
          newCat.number = $('#iptNumber').val();
          newCat.description = $('#iptDescription').val();

          // 单独定义一个FormData对象用于上传图片及相关数据到 /cat/upload-picture 接口
          var formData = new FormData();
          formData.append('cat_id', newCat.cat_id);
          // formData.append('breed', newCat.breed);
          // formData.append('age', newCat.age);
          // formData.append('lost_data', newCat.lost_data);
          // formData.append('lost_site', newCat.lost_site);
          // formData.append('number', newCat.number);
          // formData.append('description', newCat.description);
      
          // 获取选择的图片文件并添加到FormData对象中
          var file = $('#iptPicture').prop('files')[0];
          if (file) {
              formData.append('picture', file);
          }

          if(($('#btnSave').attr('operation'))=='修改'){
            newCat.id=$('#btnSave').attr('ida');
            // 向 /cat/upload-picture 接口发送FormData格式的数据
           $.ajax({
            url: '/cat/upload-picture',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(data) {
                if (data.message == 'success') {
                    //添加成功，重新加载数据
                    // alert('添加图片成功');
                    // location.reload();
                }
            }
            });
            $.post('/cat/update', JSON.stringify(newCat), function(data) {
            if(data.message=='success'){
            alert('修改信息成功');
              location.reload();
            }
           })
           
          }else{
            // 向 /cat/upload-picture 接口发送FormData格式的数据
            $.ajax({
              url: '/cat/upload-picture',
              type: 'POST',
              data: formData,
              processData: false,
              contentType: false,
              success: function(data) {
                  if (data.message == 'success') {
                      //添加成功，重新加载数据
                      // alert('添加图片成功');
                      // location.reload();
                  }
              }
            });
            //测试
            // alert('else')
            $.post('/cat/add', JSON.stringify(newCat), function(data) {
            if(data.message=='success'){
            //添加成功，重新加载数据
            alert('添加信息成功');
              location.reload();
            }
          })
            
          }
        }) 
           
  });
}





function deleteCat(id) {
      //测试
      // alert(id);
      const api = '/cat/delete?id=' + id;
      $.getJSON(api, function(data) {
        if(data.message == 'success') {
          // 刷新表格
          alert('这条信息已删除！！！');
          window.location.reload();
        }
      })
    }


  const labels = $('form label');
  $(labels).parents('td').css('text-align','right').css('padding-right','5px');
  $('#form-table span').parents('td').css('text-align','center').css('padding-right','5px')